<template>
<div>
  <div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/admin/index' }">
      <i class="el-icon-s-promotion"></i>
      管理后台首页
    </el-breadcrumb-item>
    <el-breadcrumb-item :to="{path: '/admin/check/checkInfo'}">入住登记信息</el-breadcrumb-item>
    <el-breadcrumb-item>入住登记信息添加</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>
    <el-card class="box-card">
      <h1 style="font-size: 25px;margin-bottom: 25px;text-align: center">入住登记信息添加</h1>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="老人姓名:" prop="name">
      <el-input v-model="ruleForm.name" placeholder="请选择老人信息" readOnly style="width: 300px;" ></el-input>
      <i class="el-icon-lock" style="position: relative;left: -20px"></i>
      <el-button @click="checkOlderInfo">选择</el-button>
    </el-form-item>
    <el-form-item label="性别:" prop="name">
      <el-input v-model="ruleForm.gender" placeholder="请选择老人信息" readOnly style="width: 380px;" ></el-input>
      <i class="el-icon-lock" style="position: relative;left: -20px"></i>
    </el-form-item>
    <el-form-item label="年龄:" prop="name">
      <el-input v-model="ruleForm.age" placeholder="请选择老人信息" readOnly style="width: 380px;" ></el-input>
      <i class="el-icon-lock" style="position: relative;left: -20px"></i>
    </el-form-item>
    <el-form-item label="联系方式:" prop="name">
      <el-input v-model="ruleForm.phoneNumber" placeholder="请选择老人信息" readOnly style="width: 380px;" ></el-input>
      <i class="el-icon-lock" style="position: relative;left: -20px"></i>
    </el-form-item>
    <el-form-item label="入住日期:" prop="date">
      <el-date-picker
          v-model="ruleForm.date"
          type="datetime"
          placeholder="选择日期时间" style="width: 380px;">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
    </el-card>
    <div id = "box1" v-show="tableShow" style="position: fixed; top: 200px;left: 550px;width: 900px;opacity: 0.8">
      <template>
        <el-card style="height:500px;">
          <i class="el-icon-close" style="font-size: 30px;margin-left: 97%;" @click="OutcheckOlderInfo"></i>
          姓名：<el-input placeholder="请输入搜索的姓名" v-model="Content" class="input-with-select" style="width: 250px;">
          <el-button slot="append" icon="el-icon-search" @click="checkSelectByname()"></el-button>
        </el-input>
        <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="height: 350px;overflow: scroll">
          <el-table-column
              type="index"
              width="50">
          </el-table-column>
          <el-table-column
              property="name"
              label="姓名"
              width="120">
          </el-table-column>
          <el-table-column
              property="gender"
              label="性别">
          </el-table-column>
          <el-table-column
              property="age"
              label="年龄"
              width="120">
          </el-table-column>
          <el-table-column
              property="phoneNumber"
              label="联系方式">
          </el-table-column>
        </el-table>
          <el-button type="primary" style="margin-top: 20px;margin-left: 82%" @click="alreadlyCheckOlderInfo">确定</el-button>
          <el-button type="info" @click="OutcheckOlderInfo">取消</el-button>
        </el-card>
      </template>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        id:"",
        name: '',
        gender:'',
        age:'',
        phoneNumber:'',
        date:""
      },
      rules: {
        name: [
          { required: true, message: '请选择老人信息', trigger: 'blur' }
        ],
        date:[
          { required: true, message: '请选择入住时间', trigger: 'blur' }
        ]
      },
       tableShow:false,
      Content: "",
      tableData: [],
      currentRow: null
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let checkAddArr = {olderId:this.ruleForm.id,date: this.ruleForm.date};
          this.axios.create({
                headers:{
                  'Authorization':localStorage.getItem("jwt")
                }
              }
          ).post("http://localhost:8080/checkInfo/add-new",checkAddArr).then((response)=>{
            if(response.data.state == 20000)
            {
              this.$message.success("添加成功！");
              location.href="/admin/check/checkInfo";
            }
            else {
              this.$message.error(response.data.message);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.gender ="";
      this.ruleForm.phoneNumber ="";
      this.ruleForm.age ="";
    },
    checkSelectByname(){
      this.axios.create({
            headers:{
              'Authorization':localStorage.getItem("jwt")
            }
          }
      ).get("http://localhost:8080/checkInfo/list/alloder-Info?Content="+this.Content).then((response)=>{
        this.tableData = response.data;
      })
    },
    checkOlderInfo()
    {
      this.axios.create({
            headers:{
              'Authorization':localStorage.getItem("jwt")
            }
          }
      ).get("http://localhost:8080/checkInfo/list/alloder-Info?Content="+this.Content).then((response)=>{
        this.tableData = response.data;
      })
      this.tableShow = true;
      var box = document.getElementById("box1");
      box.onmousedown=function(event){
        event=event||window.event;//解决浏览器兼容问题

        //div的左偏移量=鼠标.clientX-元素.ofsetLeft
        let boxLeft=event.clientX-box.offsetLeft;

        //div的上偏移量=鼠标.clientY-元素.ofsetTop
        let boxTop=event.clientY-box.offsetTop;

        //为document绑定一个onmousemove事件
        document.onmousemove=function(event){
          event=event||window.event;//解决浏览器兼容问题

          //获取鼠标的坐标
          let left=event.clientX-boxLeft;
          let top=event.clientY-boxTop;

          //盒子移动的最大偏移量=浏览器宽度-盒子宽度
          let moveLeft=document.documentElement.clientWidth-box.offsetWidth;
          let moveTop=document.documentElement.clientHeight-box.offsetHeight;

          //让盒子不超出浏览器范围
          if(left<=0){
            left=0;
          }
          else if(left>moveLeft){
            left=moveLeft;
          }
          else{
            box.style.left=left+"px";
          }

          if(top<=0){
            top=0;
          }
          else if(top>moveTop){
            top=moveTop;
          }
          else{
            box.style.top=top+"px";
          }

        };

        //为document绑定一个鼠标抬起事件，鼠标松开时，将box固定在当前位置
        document.onmouseup=function(){
          //取消document的onmousemove事件
          document.onmousemove=null;

          //取消document的onmouseup事件
          document.onmouseup=null;
        };
      };
    },
    OutcheckOlderInfo()
    {
      this.tableShow = false;
      this.tableData = [];
      this.currentRow=null;
      this.Content="";
    },
    alreadlyCheckOlderInfo()
    {
      if(this.currentRow==null)
      {
        this.$message.error("未选择,请选择老人信息!");
        return;
      }
      this.ruleForm.id = this.currentRow.id;
      this.ruleForm.name = this.currentRow.name;
      this.ruleForm.gender = this.currentRow.gender;
      this.ruleForm.phoneNumber = this.currentRow.phoneNumber;
      this.ruleForm.age = this.currentRow.age;
      this.OutcheckOlderInfo();
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    }
  },
  created:function ()
  {
    this.ruleForm.date = new Date();
  }
}
</script>

<style>
.box-card{
  width: 80%;
  height: 600px;
  margin: 0 auto;
}
.demo-ruleForm{
  width: 50%;
  margin: 0 auto;
}
.el-icon-close:hover{
  color: deepskyblue;
}
#box1 .input-with-select>.el-input__inner{
  height: 30px;
}
</style>